<template>
  <page-layout>
    <a-spin :spinning="isLoading">
      <a-card>
        <footer-button :buttons="state.buttons" />
        <!-- <a-form>
          <a-row type="flex" justify="space-between">
            <a-col
              v-for="item in baseFields.fields"
              :span="item.span?item.span:8"
              :key="item.field"
            >
              <a-form-item :label="item.title" class="mb-5" :label-col="{ span: 5}">
                {{ handleFormEmptyData(baseFields.data[item.field]) }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-form> -->
        <readonly-form :fields="baseFields.fields" :data="baseFields.data" />
        <a-tabs :active-key(v-model)="activeKey" size="small">
          <a-tab-pane key="detail" tab="详情">
            <DetailBaseForm :data="baseFields.data" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-spin>
  </page-layout>
</template>
<script>
export default {
  name: 'project-manage-detail'
}
</script>
<script setup>
import { reactive, onActivated, ref } from "vue";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
import { isEmpty } from "@/tools/common";
import DetailBaseForm from "./components/detail-base-form";
import { handleFormEmptyData } from "@/tools/filters";
import { selectById } from '@/api/module/project'
import moment from "moment";

const route = useRoute();
const router = useRouter();
const isLoading = ref(false);
const state = reactive({
  buttons: [
    {
      name: "adjust",
      event: () => handleAdjust(),
      type: "primary",
      code: "",
    },
  ],
  commisType: 0,
});

const handleAdjust = () => {
  router.push({
    path: "/university/project-manage/edit",
    query: { id: baseFields.data.id || '' },
  });
};

const baseFields = reactive({
  fields: [
    {
      title: '基础信息',
      fields: [
        { span: 6, title: "项目编码", field: "code" },
        { span: 6, title: "项目名称", field: "projectName" },
        { span: 6, title: "对接人", field: "responsiblePersonName" },
        { span: 6, title: "项目地址", field: "projectAddress" },
        { span: 6, title: "学年", field: "schoolYear" },
        { span: 6, title: "学校名称", field: "schName" },
        { span: 6, title: "季度", field: "quarter" },
        { span: 6, title: "项目形式", field: "shape" },
        { span: 6, title: "创建人", field: "createBy" },
        { span: 6, title: "创建时间", field: "createTime" },
        { span: 6, title: "备注", field: "projectDesc" },
      ]
    }
  ],
  data: {},
  dict: {},
});
const getDataByDict = (data, dictKey) => {
  if (isEmpty(data)) return "-";
  const item = baseFields.dict[dictKey].find((v) => v.value == data);
  if (isEmpty(item)) return "-";
  return item.label;
};

onActivated(async () => {
  const result = route.query;
  if (!result || !result.id) return;
  baseFields.dict = await getDictByCodesReturnObj([
    dictEnum.PROJECT_STATE,
    dictEnum.PROJECT_SPEED,
    dictEnum.FOLLOW_PROGRESS,
    dictEnum.SHAPE,
    dictEnum.QUARTER,
  ]);

  isLoading.value = true;
  let res = await selectById({ id: result.id });
  if (res.code === 500) return message.error("获取详情失败");
  res.data.files.map(file => (res.data[file.type] = file.name));
  res.data.startTime = res.data.startTime ? moment(res.data.startTime).format('YYYY-MM-DD') : ''
  res.data.endTime = res.data.endTime ? moment(res.data.endTime).format('YYYY-MM-DD') : ''
  res.data.speedProgress = getDataByDict(res.data.speedProgress, dictEnum.PROJECT_SPEED);
  res.data.state = getDataByDict(res.data.state, dictEnum.PROJECT_STATE);
  res.data.quarter = getDataByDict(res.data.quarter, dictEnum.QUARTER);
  res.data.shape = getDataByDict(res.data.shape, dictEnum.SHAPE);

  baseFields.data = res.data;
  isLoading.value = false;
});
</script>

<style>
</style>